<template>
  <div class="filter_hotel">
    <ul>
      <li>
        <p>
          <i>价格</i>
          <em>0-{{slider_value}}</em>
        </p>
        <h2>
          <div class="block">
            <el-slider v-model="slider_value" :max="4000" @change="slider"></el-slider>
          </div>
        </h2>
      </li>
      <li>
        <p>酒店等级</p>
        <h2>
          <el-select
            v-model="value_level"
            multiple
            collapse-tags
            placeholder="不限"
            @visible-change="runfilter"
          >
            <el-option
              v-for="item in data.levels"
              :key="item.id"
              :label="item.name"
              :value="item.level"
            ></el-option>
          </el-select>
        </h2>
      </li>
      <li>
        <p>住宿类型</p>
        <h2>
          <el-select
            v-model="value_type"
            multiple
            collapse-tags
            placeholder="不限"
            @visible-change="runfilter"
          >
            <el-option
              v-for="item in data.types"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </h2>
      </li>
      <li>
        <p>酒店设施</p>
        <h2>
          <el-select
            v-model="value_facility"
            multiple
            collapse-tags
            placeholder="不限"
            @visible-change="runfilter"
          >
            <el-option
              v-for="item in data.assets"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </h2>
      </li>
      <li>
        <p>酒店品牌</p>
        <h2>
          <el-select
            v-model="value_brand"
            filterable
            multiple
            collapse-tags
            no-match-text="没有找到"
            placeholder="不限"
            @visible-change="runfilter"
          >
            <el-option
              v-for="item in data.brands"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </h2>
      </li>
      <li>
        <el-button type="primary" @click="remove_all">撤销全部</el-button>
      </li>
    </ul>
  </div>
</template>

<script>
import loginVue from "~/pages/user/login.vue";
export default {
  props: ["hotel_list"],
  data() {
    return {
      data: "",
      slider_value: 4000,
      value_level: [],
      value_type: [],
      value_facility: [],
      value_brand: [],
    };
  },
  created() {
    this.$axios({
      url: "/hotels/options",
    }).then((res) => {
      this.data = res.data.data;
      // console.log(this.data);
    });
  },
  methods: {
    //撤销全部
    remove_all() {
      this.value_level = [];
      this.value_type = [];
      this.value_facility = [];
      this.value_brand = [];
      this.slider_value = 4000;
      this.runfilter();
      this.slider();
    },
    //串联过滤器
    runfilter(callback) {
      let res = [];

      if (!callback) {
        // console.log(res);
        if (this.value_level) {
          res = this.levels(res);
        }
        if (this.value_type) {
          res = this.type(res);
        }
        if (this.value_facility) {
          // res = this.facility(res);
        }
        if (this.value_brand) {
          res = this.brands(res);
        }
        this.$emit("filter", res);
      }
    },

    slider() {
      const str_slider = `&price_lt=${this.slider_value}`;
      this.$emit("sendPriceStr", str_slider);
    },
    levels(res) {
      return (
        res +
        this.value_level
          .map((item) => {
            return `&hotellevel_in=${item}`;
          })
          .join()
          .replace(",", "")
      );
    },
    type(res) {
      return (
        res +
        this.value_type
          .map((item) => {
            return `&hoteltype_in=${item}`;
          })
          .join()
          .replace(",", "")
      );
    },
    facility(res) {
      return (
        res +
        this.value_facility
          .map((item) => {
            return `&hotelasset_in=${item}`;
          })
          .join()
          .replace(",", "")
      );
    },
    brands(res) {
      return (
        res +
        this.value_brand
          .map((item) => {
            return `&hotelbrand_in=${item}`;
          })
          .join()
          .replace(",", "")
      );
    },
  },
};
</script>

<style lang="less" scoped>
//筛选区域
.filter_hotel {
  display: flex;
  border: 1px solid rgb(221, 221, 221);
  height: 80px;
  width: 100%;
  margin-top: 20px;
  > ul {
    width: 100%;
    display: flex;
    > li {
      display: flex;
      flex-direction: column;
      position: relative;
      flex: 1;
      &::after {
        content: "";
        width: 1px;
        height: 60px;
        background-color: rgb(221, 221, 221);
        position: absolute;
        right: 0;
        top: 10px;
      }
      &:last-child {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        /deep/ .el-button--info {
          width: 100px;
          background-color: rgba(166, 169, 173, 0.6);
          color: black;
          border: none;
        }
      }
      &:last-child::after {
        content: "";
        width: 1px;
        height: 100%;
        background-color: rgb(221, 221, 221);
        position: absolute;
        right: 1px;
        top: 0;
      }
      p {
        height: 50%;
        display: flex;
        align-items: center;
        color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        span {
          float: right;
        }
      }
      &:first-child {
        p {
          display: flex;
          justify-content: space-between;

          i {
            padding-left: 5px;
          }
          em {
            padding-right: 10px;
          }
        }
      }
      h2 {
        .block {
          padding: 0 14px;
        }
        flex: 1;
        //去边框
        /deep/ .el-input.el-input--suffix {
          input {
            border: none;
            &::-webkit-input-placeholder {
              color: black;
            }
          }
        }
      }
    }
    //   /depp/ .el-el-select__caret {
    //   font-size: 16px;
    //   font-weight: 700;
    // }
  }
}
</style>